<template>
  <div class="novelmain">
    <div
      class="fiction"
      :style="{ background: backColor, color: fontColor }"
      v-if="show"
    >
      <!-- 右滑返回上一页 -->
      <div class="main" v-touch:right="backBefore">
        <!-- <div class="main"> -->
        <div
          class="text"
          v-for="(item, index) in content"
          :key="index"
          ref="text"
        >
          <h3>{{ item.title }}</h3>
          <p
            v-html="item.text[0]"
            :style="{ fontSize: postFontSize + 'px' }"
          ></p>
        </div>
      </div>
      <!-- 内容结束 -->

      <div class="navigator" v-if="btnFlag">
        <div class="button" @click="prePage()">上一章</div>

        <van-popup
          v-model="show1"
          position="bottom"
          :style="{ height: '100%' }"
        >
          <header style="bakcground: #fff">
            <div class="h-left">
              <img
                @click="show1 = false"
                src="../../assets/image/18721.png"
                style="width: 8px"
              />
            </div>
            <div class="h-title">
              仙界聊天群-目录<span class="title-span">（共1892章）</span>
            </div>
            <div class="h-right">
              <router-link
                class="book"
                style="margin-right: 10px"
                to="/personal"
                >书架</router-link
              >
            </div>
          </header>

          <div class="mulu_topmenu" style="padding-bottom: 5px">
            <div class="mulu_select">
              <div class="mule_text">1-7章</div>
              <select name="menulist">
                <option value="1">1-7章</option>
              </select>
            </div>
            <div class="mulu_order_z" @click="select(1)">反序</div>
            <div class="mulu_order_z" @click="select(2)">正序</div>
          </div>
          <!-- 目录列表 -->
          <div class="mulu_lists" style="margin-top: 5px">
            <div class="list_main book_list">
              <span
                v-for="(data, index) in flitertitle"
                :key="index"
                @click="page(index)"
                >{{ data.title }}</span
              >
            </div>
          </div>
        </van-popup>
        <div class="button">
          <van-cell is-link @click="showPopup">目录 </van-cell>
        </div>

        <!-- 目录显示隐藏 -->
        <div
          class="button"
          style="color: #fff; background-color: rgb(127, 184, 45)"
          @click="nextPage()"
        >
          下一章
        </div>
        <!-- 回到顶部 -->
        <div class="bac-top" v-if="btnFlag" @click="backTop"></div>

        <!-- 设置 -->
        <van-cell
          is-link
          @click="showsetUp"
          class="set-up"
          v-if="btnFlag"
        ></van-cell>
        <!-- <van-cell is-link @click="showsetUp">设置</van-cell> -->
        <van-popup
          position="bottom"
          round
          :style="{ height: '14%' }"
          v-model="show2"
        >
          <div class="font">
            <p>字体大小</p>
            <div class="font-box">
              <button class="sub" @click="sub">A-</button>
              <span>{{ postFontSize }}</span>
              <button class="add" @click="add">A+</button>
            </div>
          </div>
          <div class="background">
            <p>阅读背景</p>
            <div class="back-one" @click="backone"></div>
            <div class="back-tow" @click="backtow"></div>
            <div class="back-three" @click="backthree"></div>
            <div class="background" @click="background"></div>
            <div class="yueliang" @click="yueliang"></div>
          </div>
        </van-popup>
      </div>
    </div>
    <!-- 目录 -->

    <!-- 目录结束 -->
  </div>
</template>

<script>
import { getFictionApi } from "../../api/novelmain.js";
import content from "../../../public/json/fictionapi.json";
import { Toast } from "vant";

export default {
  data() {
    return {
      showPopover: false,
      actions: [{ text: "选项一", icon: "add-o" }],
      btnFlag: false,
      show: true, //默认不显示
      content: null,
      listsHeight: [],
      // 正反序
      orderType: 0,
      persons: [],
      bookNum: 0,
      show1: false,

      show2: false,
      postFontSize: "17",
      backColor: 'url("../../assets/image/10001.png")',
      fontColor: "#2E343f",
    };
  },
  computed: {
    // 正反序
    flitertitle() {
      const { content, orderType } = this;
      let fPersons;
      //对persons进行过滤
      fPersons = content.filter((p) => {
        return p;
      });
      if (orderType !== 0) {
        fPersons.sort(function (p1, p2) {
          if (orderType === 1) {
            return p2.id - p1.id;
          } else {
            return p1.id - p2.id;
          }
        });
      }
      return fPersons;
    },
  },
  methods: {
    add() {
      //加
      this.postFontSize++;
      this.postFontSize = this.postFontSize > 24 ? 24 : this.postFontSize;
      if (this.postFontSize == 24) {
        Toast("已是最大");
      }
    },
    sub() {
      //减
      this.postFontSize--;
      this.postFontSize = this.postFontSize < 12 ? 12 : this.postFontSize;
      if (this.postFontSize == 12) {
        Toast("已是最小字体");
      }
    },
    backone() {
      this.fontColor = "#2E343f";

      this.backColor = "#d7ece3";
    },
    backtow() {
      this.fontColor = "#2E343f";

      this.backColor = "#e4f7fe";
    },
    backthree() {
      this.fontColor = "#2E343f";

      this.backColor = "#ffeadf";
    },
    background() {
      this.fontColor = "#2E343f";

      this.backColor = 'url("../../assets/image/10001.png")';
    },
    yueliang() {
      this.backColor = "#000000";
      this.fontColor = "#999999";
    },
    showsetUp() {
      this.show2 = true;
    },
    onSelect(action) {
      Toast(action.text);
    },

    showPopup() {
      this.show1 = true;
    },
    chushihua() {
      let height = 0;
      this.listsHeight.push(height);
      for (var i = 0; i < this.$refs.text.length; i++) {
        height += this.$refs.text[i].clientHeight;
        this.listsHeight.push(height);
      }
    },
    //上一页
    prePage() {
      if (this.bookNum > 0) {
        this.bookNum -= 1;
      }
      console.log(this.bookNum);
      let height = this.listsHeight[this.bookNum];
      window.scroll({
        top: height,
      });
    },
    //下一页
    nextPage() {
      if (this.bookNum < this.listsHeight.length - 2) {
        this.bookNum += 1;
      }
      console.log(this.bookNum);
      let height = this.listsHeight[this.bookNum];
      window.scroll({
        top: height,
      });
    },
    page(index) {
      this.show1 = false;
      if (this.orderType == 1) {
        this.bookNum = this.listsHeight.length - 2 - index;
      } else {
        this.bookNum = index;
      }
      let height = this.listsHeight[this.bookNum];
      window.scroll({
        top: height,
      });
      console.log(1);
    },

    back() {
      this.$router.go(-1);
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 向右滑返回上一页
    backBefore() {
      this.$router.go(-1);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      // console.log(that.scrollTop);
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    getFictionFun() {
      getFictionApi().then((data) => {
        this.content = data.content;
      });
    },
    // 正反序
    select(orderType) {
      this.orderType = orderType;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
    this.chushihua();
  },
  created() {
    this.getFictionFun();
    this.content = content.content;
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-icon {
    display: none;
  }
  .van-cell {
    background: none;
  }
  .van-cell__value--alone {
    text-align: center;
    font-size: 17px;
  }
  .van-popover__wrapper {
    position: absolute;
    bottom: 55px;
    height: 33px;
  }
  .van-overlay {
    background-color: transparent;
  }
}
// 字体
.font {
  display: flex;
  height: 35px;
  color: #666;
  padding: 5px 0;
  p {
    font-size: 17px;
    line-height: 35px;
    padding: 0 30px 0 20px;
  }
  .font-box {
    height: 33px;
    display: flex;
    align-items: center;
    border: 1px solid #a6a39b;
    background-color: rgba(250, 250, 250, 0.98);
    button {
      width: 70px;
      font-size: 17px;
      line-height: 20px;
      border: none;
      background: transparent;
    }
    span {
      padding: 0 20px;
      font-size: 17px;
      color: #a6a39b;
    }
    .add {
      border-left: 2px solid #d6d6d6;
    }
    .sub {
      border-right: 2px solid #d6d6d6;
    }
  }
}
// 背景色
.background {
  display: flex;
  height: 35px;
  color: #666;
  padding: 5px 0;
  p {
    font-size: 16px;
    line-height: 35px;
    padding: 0 20px;
  }
  div {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    margin: 0 6px;
  }
  .back-one {
    background: #d7ece3;
  }
  .back-tow {
    background: #e4f7fe;
  }
  .back-three {
    background: #ffeadf;
  }
  .background {
    width: 32px;
    height: 22px;
    background: url("../../assets/image/10001.png");
  }
  .yueliang {
    background: url("../../assets/image/yueliang.png") no-repeat center #000;
  }
}
.fiction {
  //   background: url("../../assets/image/10001.png");
  background: url("../../assets/image/10001.png");
  // padding: 10px;
  color: #2e343f;
  line-height: 1.7;
  font-size: 20px;
  position: relative;
  .bac-top {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 37px;
    height: 37px;
    background: url("../../assets/image/10068.png") no-repeat center;
    background-size: 37px 37px;
  }
  .set-up {
    position: fixed;
    bottom: 40px;
    right: 10px;
    width: 37px;
    height: 37px;
    opacity: 0.8;
    border-radius: 50%;
    border: 1px solid #c6c6c6;
    background: url("../../assets/image/设置.png") no-repeat center #a6a39b;
    background-size: 37px 37px;
  }
  .navigator {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    .button {
      flex: 1;
      text-align: center;
      background-color: #eaeaea;
      border-radius: 5px;
      height: 33px;
      border: 1px solid #c6c6c6;
      font-size: 16px;
      line-height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
body {
  font-size: 14px;
}
.title-span {
  font-size: 12px;
  color: #000;
}
.mulu_topmenu {
  height: 34px;
  display: -webkit-box;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
}
.mulu_select {
  position: relative;
  -webkit-box-flex: 1;
  height: 35px;
  border: 1px solid #c6c6c6;
  background-color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  background: url(https://img.xmkanshu.com/operateimg/img/img/14741/14741.png)
    no-repeat;
  background-color: #fff;
  background-position: 96%, right center;
  background-size: 10px 7px;
  .mule_text {
    padding-left: 20px;
    line-height: 35px;
    height: 35px;
  }
  select {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    option {
      border: 2px #d3270f solid;
      line-height: 35px;
    }
  }
}
.mulu_order_z {
  text-align: center;
  width: 45px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #c6c6c6;
  border-radius: 3px;
  margin-left: 5px;
  font-size: 15px;
  background-color: #fff;
  background-position: 10px center;
  background-size: 8px 12px;
}
.ad {
  margin-top: 3px;
  img {
    width: 100%;
    display: block;
  }
}
.mulu_lists {
  background: #fff;
  // margin-top: 10px;
  // padding-top: 10px;
  padding-bottom: 1px;
}
.book_list {
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px #efefef solid;
  padding: 10px;
  span {
    display: block;
    font-size: 14px;
    color: #333;
    -webkit-box-flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px;
  }
}
.main {
  padding: 0 15px;
  .text {
    // columns: calc(100vh - 32px) 1;
    // column-gap: 18px;
    height: 100%;
    transition: 0.4s;
    h3 {
      font-size: 22px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
    }
    // height: 667px;
    & > p {
      font-size: 17px;
      text-indent: 2em;
      overflow-x: hidden;
    }
  }
}
</style>